<template>
    <div class="container-fluid" v-loading="loading">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">

                    <category-menu-component :category-id="categoryId" :active-index="activeIndex"></category-menu-component>

                    <div class="card-body">
                        <div>
                            <form class="form-inline" onsubmit="return false;">
                                <div class="form-group">
                                    <input class="form-control" type="text" id="example-if-email"
                                           name="example-if-email" placeholder="请输入抖音|快手链接" v-model="url" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="button" v-on:click="draw">提取视频</button>
                                </div>
                                <div class="form-group" style="margin-right:40px;">
                                    <a href="/admin/video/create">
                                        <button class="btn btn-success" type="button">直接创建</button>
                                    </a>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="example-if-password">请视频标题</label>
                                    <input class="form-control" type="text" id="example-if-password"
                                           name="example-if-password" placeholder="请视频标题" v-model="keyword" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <el-select v-model="search_status" placeholder="全部">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit" v-on:click="search()">筛选</button>
                                </div>
                            </form>
                        </div>
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: 'date', order: 'descending'}"
                            >
                                <el-table-column
                                        label="ID"
                                        type="index"
                                        :index="indexMethod"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        label="视频标题"
                                        width="120">
                                    <template slot-scope="scope">
                                        <a :href="'/admin/video/'+scope.row._id+'/edit'" target="_blank" style="cursor:pointer;">{{scope.row.title}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="所属分类"
                                        :formatter="formatIndustry"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="上传用户"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        label="来源平台"
                                        align="center"
                                        width="90">
                                    <template slot-scope="scope">
                                        {{scope.row.officialAccount | titleFormatter}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="推送状态"
                                        width="80">
                                    <template slot-scope="scope">
                                        <label v-if="!scope.row.pushStatus">未推送</label>
                                        <label v-if="scope.row.pushStatus">已推送</label>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="wxView"
                                        label="浏览"
                                        sortable
                                        width="75">
                                </el-table-column>
                                <el-table-column
                                        prop="shareNum"
                                        label="分享"
                                        sortable
                                        width="75">
                                </el-table-column>
                                <el-table-column
                                        prop="created_at"
                                        label="上传时间"
                                        align="center"
                                        sortable
                                        width="170">
                                </el-table-column>

                                <el-table-column
                                        label="操作"
                                        align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                type="primary"
                                                @click="handlePush(scope.row._id,1)" v-if="!scope.row.pushStatus">推送
                                        </el-button>
                                        <el-button
                                                size="mini"
                                                type="primary"
                                                @click="handlePush(scope.row._id,0)" v-if="scope.row.pushStatus">取消推送
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import CategoryMenuComponent from "./CategoryMenuComponent";
    export default {
        name: "CategoryVideoComponent",
        components: {
            "category-menu-component": CategoryMenuComponent,
        },
        data() {
            return {
                keyword: '',
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                activeIndex: '2',
                name: '',
                order: 'desc',
                orderField: '_id',
                options: [{
                    value: -1,
                    label: '全部'
                }, {
                    value: 1,
                    label: '已推送'
                }, {
                    value: 0,
                    label: '未推送'
                }],
                search_status: -1,
                status: 0,
                url:'',
                categoryId: $('meta[name="id"]').attr('content'),
            }
        },
        methods: {
            search: function () {
                let self = this;
                let uri = 'article/video/cartoon/post-list';
                self.loading = true;
                let postData = {
                    type:2,
                    keyword: self.keyword,
                    page: self.currentPage,
                    order: self.order,
                    orderField: self.orderField,
                    verifyStatus: 1,
                    categoryId: self.categoryId
                };
                axios.post(uri, postData).then(function (result) {
                    self.total = result.data.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.data.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            indexMethod: function (index) {
                return index + 1;
            },
            handleSetStatus(id, status) {
                let self = this;
                let uri = "company/set-status/" + id + "/" + status;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            sortChange(item) {
                let order = "asc";
                this.orderField = item.prop;
                if (item.order === 'descending') {
                    order = "desc";
                }
                this.order = order;
                this.search();
            },
            openEdit(id) {
                this.openUri('video/' + id + '/edit');
            },
            formatIndustry: function (row, column) {
                return this.filterLength(row.categoryStr, 4);
            },
            filterLength: function (str, length = 9) {
                if (str.length >= length) {
                    return str.substring(0, length) + '...';
                }
                return str.length === 0 ? '--' : str;
            },
            handlePush: function (id, pushStatus) {
                let self = this;
                let tipStr = "确定该操作, 是否继续?";
                self.$confirm(tipStr, '推送设置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.pushRequire(id, pushStatus)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            pushRequire: function (id, pushStatus) {
                let self = this;
                let uri = "article/video/cartoon/push/" + id + '/' + pushStatus;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            draw() {
                let self = this;
                let uri = "video/draw";
                let videoUrl = this.url;
                if (!videoUrl) {
                    self.$message.error('提取链接不能为空！');
                    return;
                }
                let postData = {url: videoUrl,categoryTags:[this.categoryId]};
                self.loading = true;
                axios.post(uri,postData).then(function (result) {
                    self.url = "";
                    self.search();
                },function (error) {
                    self.loading = false;
                });
            }
        },
        mounted() {
            this.search();
        },
        filters: {
            titleFormatter(title) {
                title = !title ? '' : title;
                if (title.length >= 10) {
                    return title.substring(0, 10) + '...';
                }
                return title.length === 0 ? '--' : title;
            }
        }
    }
</script>

<style scoped>

</style>
